<template>
	<view class="container gray_bg system_set">
		<view class="set_bd">
      <tm-sheet :margin="[20]" :round="3" :shadow="0">
        <view class="set_info">
          <view>版本信息</view>
          <view>{{version}}</view>
        </view>
      </tm-sheet>
      <view class="support_text">万名云提供技术支持</view>
    </view>
		<view class="guit_btn">
			<tm-button block label="立即退出" round="25" @click="quit"></tm-button>
		</view>
		
		
		<!-- 退出登录提示框 -->
		<tm-modal
					color="white"
					okColor="#fff"
					border="3"
					title="提示"				
					v-model:show="visible"
					titleStyle="[{font-size: 18px;}]"
				>
				<template #default>
					<view class="content_text">确认退出登录吗?</view>
				</template>
				<template #button>
					<view class="modal_bottom_btn">
						<view class="modal_footer_btn modal_cancel_btn" @click="cancel">暂不</view>
						<view class="modal_footer_btn modal_sure_btn" @click="handleOk">确认</view>
					</view>					
				</template>
			</tm-modal>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { quitSystem } from '@/api_request/api'
	import utils from '@/utils/index';

	import { VERSION } from '@/config'

  const version = ref(VERSION)
	const visible = ref<boolean>(false)
	const quit = async () => {
		visible.value = true	
	}
	
	const handleOk = async () => {
		visible.value = false
		const res:any = await quitSystem({})
		uni.clearStorageSync()
		utils.storage.logout()
		utils.storage.setUserId('')
		if(res.code === 200){
			uni.showToast({
				title: '退出成功',
				icon:'none',
				complete: ()=> {
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 500)
				}
			})
			return
		}
		uni.$showMsg(res.message)
	}
	const cancel = () => {
		visible.value = false
	}
</script>

<style lang="scss" scoped>
	.system_set{
		height: 100%;
	
	}
  .set_bd{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
	.set_info{
		display:flex;
		justify-content: space-between;
		color: $cus-color-2;
		font-size: $cus-font-size-14;
	}
	.guit_btn{
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		bottom: 0;
		padding: 10px;
		background: #fff;
    border-top: 1px solid #D8D8D8;
	}
  .content_text{
		color: #666;
		text-align: center;
    padding-top: 20px;
	}
  .support_text{
    color: $cus-color-5;
    text-align: center;
    padding-bottom: 20px;
  }
</style>
